<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>实现秒杀倒计时</title>
      <script>
         window.addEventListener('DOMContentLoaded', function() {
            function getCountdown() {
               let hourSpan = document.querySelector('.hour');
               let minSpan = document.querySelector('.minute');
               let secondSpan = document.querySelector('.second');
               let timeIntervalByMillisecond = new Date('2025-2-17 23:50:00') - new Date();
               let timeInterval = Math.floor(timeIntervalByMillisecond/1000);
               let timeErrorValue = timeIntervalByMillisecond % 1000;
               let hour = Math.floor(timeInterval/3600);
               let min = Math.floor(timeInterval/60-hour*60);
               let second = timeInterval-hour*3600-min*60;
               hourSpan.innerHTML = hour.toString().padStart(2, '0');
               minSpan.innerHTML = min.toString().padStart(2, '0');
               secondSpan.innerHTML = second.toString().padStart(2, '0');
               if (hour + min + second > 0) {
                  return timeErrorValue;
               }
               else {
                  return false;
               }
            }
            function getCountdownAuto() {
               let timesUp = getCountdown();
               if (timesUp === false) {
                  window.clearInterval(Countdown);
               }
            }
            let correctionTime = 1000 - getCountdown();
            let initializeCountdown = window.setTimeout(getCountdown, correctionTime);
            window.clearTimeout(initializeCountdown);
            let Countdown = window.setInterval(getCountdownAuto, 1000);
            let stopTimer = document.getElementsByTagName('button')[0];
            stopTimer.addEventListener('click', function () {
               window.clearInterval(Countdown);
            });
 
         });
      </script>
      <style>
         span {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: black;
            color: white;
            line-height: 100px;
            text-align: center;
            font-size: 40px;
         }
      </style>
   </head>
   <body>
      <button>停止定时器</button>
      <div>
         <span class="hour">10</span>
         <span class="minute">20</span>
         <span class="second">30</span>
      </div>
   </body>
</html>